<template>
    <div class="comment">
        <div class="mui-input-row" style="margin: 0 5px;">
            <textarea id="textarea" rows="4" placeholder="请输入评论(最多120字)" maxlength="120" v-model="content"></textarea>
		</div>
        <div>
            <mt-button type="primary" @click="postContent">发表评论</mt-button>
        </div>
        <div class="content">
            <ul>
                <li v-for="item in comments" :key="item._id">
                    <p>{{item.username}} 
                        <span>评论时间:2018-09-23</span>
                    </p>
                    <p>{{item.comments}}</p>
                </li>
            </ul>
        </div>
        <div>
            <mt-button type="danger" plain>加载更多</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
    data () {
        return {
            comments:[],
            content:""
        }
    },
    created() {
        this.getComments();
    },
    methods:{
        getComments(){
            this.axios.get('/api').then(body=>{
                if (body.data.status === 1) {
                    this.comments = body.data.message
                }else{
                    Toast("加载失败")
                }
            })
        },
        postContent(){
            if (this.content.trim().length ===0 ) {
                return Toast("评论不可为空")
            }
            let user_com = {
                username:"匿名用户",
                comments:this.content.trim()
            }
            this.axios.post('/api/addCommets',user_com)
            .then(body=>{
                if (body.data.status ===1 ) {
                    this.comments.unshift(user_com);
                    this.content = ''
                }else{
                    return Toast("评论失败");
                }
            })
            .catch(err=>{
                return Toast("评论失败")
            })
        }
    }
}
</script>

<style lang="less" scoped>
.comment{
    .mint-button{
        width: 100%
    }
    div.content{
        ul{
            margin: 0;
            padding: 0;
            li{
                width: 100%;
                list-style: none;
                border: 1px solid rgb(177, 175, 164);
                margin-top: 5px;
                p{
                    line-height: 2em;
                    text-indent: 1em;
                    color: black;
                    background-color: rgb(57, 119, 235);
                    margin-bottom: 0;
                    &:last-child{
                        background-color: #fff;
                        height: 3em;
                        margin-bottom: 10px;

                    }
                }
            }
        }
        
    }
}
</style>
